<template>
  <!-- <div class="collection" @click="jumpToDetail"> -->
  <div class="collection">
    <div class="collection_img border-r">
      <img class="border-r" :src="collectionData.asset.image_url" alt="">
    </div>
    <div class="collection_info border-r bg-f-8 box-4 color-0 pd-10">
      <div class="flex-s-between font-18 fontW-b text-s">
        <div>{{collectionData.asset.name}}</div>
        <div class="price flex-n-center">
          <div v-if="isSell">{{collectionData.makerOrder.Price}}</div>
          <div v-else>--</div>
          <img src="../../assets/ETH/ETH.svg" alt="">
        </div>
      </div>
      <div class="flex-s-between font-18 fontW-b mgtb-10 text-s">
        <div>#{{collectionData.asset.TokenId}}</div>
        <div class="font-10 flex-s-around" v-if="collectionData.timer">
          <img src="../../assets/icon/clock.svg" alt="">
          <span class="mgl-5">{{collectionData.timer}}Days left</span>
        </div>
      </div>
      <div class="groupandlike flex-s-between">
        <div class="group ">
          <div class="flex-n-center" v-if="collectionData.isGroup">
            <div v-for="(item, i) in 5" :key="i" class="group_item radius-50" :class="item <= collectionData.groupNum ? 'grouped': 'no_group'"></div>
          </div>
        </div>
        <!-- <div class="flex-n-center">
          <div class="mgr-10 hiddenBox" v-if="pageFrom && pageFrom=== 'collection'">
            <i class="el-icon-more"></i>
          </div>
          <div>
            <img v-if="collectionData.like" src="../../assets/icon/like_active.svg" alt="">
            <img v-else src="../../assets/icon/like.svg" alt="">
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>
<script>
export default {
  // type 1 个人
  props: ['collectionData', 'pageFrom', 'type'],
  data () {
    return {}
  },
  created () {
    console.log(this.collectionData, '________11111_______')
    if (this.collectionData.makerOrder.ID === 0) {
      this.isSell = false
    } else {
      this.isSell = true
    }
    console.log(this.pageFrom, this.type)
  },
  methods: {
    jumpToDetail: function () {
      // let path = '/'
      // let query = null
      // if (this.pageFrom === 'search') {
      //   path = '/details'
      //   query = {
      //     id: this.collectionData.asset.ID
      //   }
      // } else if (this.pageFrom === 'collection' && this.type === '1') {
      //   path = '/details'
      //   query = {
      //     id: this.collectionData.asset.ID
      //   }
      // } else {
      //   path = '/buypage'
      //   query = {
      //     id: this.collectionData.asset.ID
      //   }
      // }
      let path = '/buypage'
      let query = {
        id: this.collectionData.asset.ID
      }
      this.$router.push({
        path: path,
        query: query
      })
    }
  }
}
</script>
<style lang="less" scoped>
.collection {
  cursor: pointer;
  .collection_img {
    img {
      width: 100%;
      height: 249px;
      object-fit: cover;
    }
  }
  .collection_info {
    .price {
      img {
        width: 18px;
        height: 18px;
      }
    }
    .groupandlike {
      .group {
        .group_item {
          width: 13px;
          height: 13px;
          margin: 0 5px 0 0;
        }
        .grouped {
          background: #FE66C4;
        }
        .no_group {
          background: #FFFFFF;
          box-sizing: border-box;
          border: 2px solid #FE66C4;
        }
      }
    }
    .hiddenBox {
      cursor: pointer;
    }
  }
}
</style>
